<template>
  <t-layout class="layout">
    <t-header class="header">
      <t-head-menu value="item1" height="64px">
        <template #logo>
          <img width="136" class="logo" src="https://www.tencent.com/img/index/menu_logo_hover.png" alt="logo" />
        </template>
        <t-menu-item value="item1"> 已选内容 </t-menu-item>
        <t-menu-item value="item2"> 菜单内容一 </t-menu-item>
        <t-menu-item value="item3"> 菜单内容二 </t-menu-item>
        <t-menu-item value="item4" :disabled="true"> 菜单内容三 </t-menu-item>
        <template #operations>
          <a href="javascript:;"><t-icon class="t-menu__operations-icon" name="search" /></a>
          <a href="javascript:;"><t-icon class="t-menu__operations-icon" name="notification-filled" /></a>
          <a href="javascript:;"><t-icon class="t-menu__operations-icon" name="home" /></a>
        </template>
      </t-head-menu>
    </t-header>
    <t-layout>
      <t-aside class="aside" style="border-top: 1px solid var(--component-border);">
        <t-menu theme="dark" value="dashboard" :collapsed="collapsed">
          <template #operations>
            <t-button  shape="square" @click="changeCollapsed">
              <t-icon :name="iconName" />
            </t-button>
          </template>
          <t-menu-item value="dashboard">
            <template #icon>
              <t-icon name="dashboard" />
            </template>
            仪表盘
          </t-menu-item>
          <t-menu-item value="resource">
            <template #icon>
              <t-icon name="server" />
            </template>
            资源列表
          </t-menu-item>
          <t-menu-item value="root">
            <template #icon>
              <t-icon name="root-list" />
            </template>
            根目录
          </t-menu-item>
          <t-menu-item value="control-platform">
            <template #icon>
              <t-icon name="control-platform" />
            </template>
            调度平台
          </t-menu-item>
          <t-menu-item value="precise-monitor">
            <template #icon>
              <t-icon name="precise-monitor" />
            </template>
            调度平台
          </t-menu-item>
          <t-menu-item value="mail">
            <template #icon>
              <t-icon name="mail" />
            </template>
            消息区
          </t-menu-item>
          <t-menu-item value="user-circle">
            <template #icon>
              <t-icon name="user-circle" />
            </template>
            个人中心
          </t-menu-item>
          <t-menu-item value="play-circle">
            <template #icon>
              <t-icon name="play-circle" />
            </template>
            视频区
          </t-menu-item>
          <t-menu-item value="edit1">
            <template #icon>
              <t-icon name="edit-1" />
            </template>
            资源编辑
          </t-menu-item>
        </t-menu>
      </t-aside>
      <t-layout class="main-content-layout">
        <t-content class="main-content" style="background-color: antiquewhite;">
          <RouterView />
        </t-content>
        <t-footer class="footer">Copyright @ 2019-{{ new Date().getFullYear() }} Tencent. All Rights Reserved</t-footer>
      </t-layout>
    </t-layout>
  </t-layout>
</template>

<script setup>
  import { ref, computed } from 'vue';
  import {
    Menu as TMenu,
    Submenu as TSubmenu,
    MenuItem as TMenuItem,
    Button as TButton,
    Icon as TIcon,
    Aside as TAside,
    Layout as TLayout,
    Header as THeader,
    Content as TContent,
    Footer as TFooter,
    HeadMenu as THeadMenu,
  } from 'tdesign-vue-next';

  const collapsed = ref(false);
  const iconName = computed(() => (collapsed.value ? 'chevron-right' : 'chevron-left'));

  const changeCollapsed = () => {
    collapsed.value = !collapsed.value;
  };

  // 计算属性用于样式绑定
  const asideWidth = computed(() => (collapsed.value ? '64px' : '232px'));
  const contentMarginLeft = computed(() => (collapsed.value ? '64px' : '232px'));
</script>
<style lang="less" scoped>

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.aside {
  position: fixed;
  top: 64px;
  left: 0;
  bottom: 0;
  width: v-bind('asideWidth');
  height: calc(100vh - 64px);
  z-index: 100;
  transition: width 0.3s ease;
}

.main-content-layout {
  margin-left: v-bind('contentMarginLeft');
  margin-top: 64px;
  height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  transition: margin-left 0.3s ease;
}

.main-content {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.footer {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--component-border);
  background-color: white;
}
.t-menu__operations{
  height: 20px !important;
  background-color: #242424 !important;
}

.t-demo-collapse-btn {
  color: #fff;
  position: absolute;
  top: 16px;
  right: 8px;
  z-index: 200;

  &:hover {
    background-color: #4b4b4b;
    border-color: transparent;
    --ripple-color: #383838;
  }
}

// 菜单收起时的图标样式优化
:deep(.t-menu--collapsed) {
  .t-icon {
    margin-right: 0;
  }
}

// 添加过渡效果
:deep(.t-menu__item),
:deep(.t-menu__item-icon) {
  transition: all 0.2s ease;
}


</style>